<template>
	<view class="publish-wrap">
		<view class="flex flex-h flex-wrap list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="iconfont" :class="item.iconName" :style="{backgroundColor: item.bgColor}"></view>
				<view class="text">{{item.text}}</view>
			</view>	
		</view>
		<view class="iconfont icon-close2 close" @click="closePage()"></view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						text: '图片',
						iconName: 'icon-image',
						bgColor: '#9BC404'
					},
					{
						id: 2,
						text: '视频',
						iconName: 'icon-video',
						bgColor: '#ccc'
					},
					{
						id: 3,
						text: '文字',
						iconName: 'icon-text',
						bgColor: '#427ED6'
					},
					{
						id: 4,
						text: '音乐',
						iconName: 'icon-music',
						bgColor: '#D247EA'
					}
				]
			};
		},
		methods: {
			closePage(){
				console.log('====')
			}
		}
	}
</script>

<style lang="scss">
	.publish-wrap{
		position: absolute;
		bottom: 1.5rem;
		.list{
			padding: 1rem .6rem;
			.item{
				width: 48%;
				.iconfont{
					margin: 0 auto;
					width: 220upx;
					height: 220upx;
					line-height: 220upx;
					font-size: 90upx;
					color: white;
					text-align: center;
					-webkit-border-radius: 50%;
					border-radius: 50%;
				}
				.text{
					margin: 10upx auto 20upx auto;
					width: 60%;
					height: 40upx;
					line-height: 40upx;
					background-color: #ccc;
					text-align: center;
					-webkit-border-radius: 20upx;
					border-radius: 20upx;
				}
			}
		}	
		.icon-close2{
			margin: 10upx auto;
			width: 50upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 50upx;
			color: #ccc;
			font-weight: bold;
		}
	}
</style>
